<template>
  <div>
    <el-card style="width: 100%" shadow="always">
      <el-button type="primary" @click="addForm">添加设备</el-button>
    </el-card>
    <el-table :border="true" :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="设备编号" min-width="100" />
      <el-table-column prop="name" label="设备名称" min-width="150" />
      <el-table-column prop="type" label="设备类型" min-width="120" />
      <el-table-column prop="holder" label="持有人" min-width="100" />
      <el-table-column prop="department" label="所属部门" min-width="150" />
      <el-table-column prop="allocationDate" label="分配日期" min-width="120" />
      <el-table-column prop="status" label="状态" min-width="100" />
      <el-table-column
        prop="lastMaintenance"
        label="最后维护日期"
        min-width="150"
      />
      <el-table-column prop="remarks" label="备注" min-width="200" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scoped">
          <el-button link type="primary" size="small" @click="edit(scoped.row)"
            >编辑</el-button
          >
          <el-button link type="primary" size="small" @click="del(scoped.row)"
            >删除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="detial(scoped.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑设备对话框 -->
    <el-dialog v-model="dialogEdit" title="编辑设备" width="400">
      <div class="form">
        <div class="form-item">
          <span class="title">设备名称</span>
          <div class="content">
            <el-input
              v-model="form.name"
              style="width: 240px"
              placeholder="设备名称"
            />
          </div>
        </div>
        <!-- 其他表单项可按需添加 -->
        <div class="form-handle">
          <el-button type="primary" @click="saveEdit">确定</el-button>
          <el-button type="primary" @click="dialogEdit = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 添加设备对话框 -->
    <el-dialog v-model="dialogAdd" title="添加设备" width="400">
      <div class="form">
        <div class="form-item">
          <span class="title">设备名称</span>
          <div class="content">
            <el-input
              v-model="form.name"
              style="width: 240px"
              placeholder="设备名称"
            />
          </div>
        </div>
        <!-- 其他表单项可按需添加 -->
        <div class="form-handle">
          <el-button type="primary" @click="saveAdd">确定</el-button>
          <el-button type="primary" @click="dialogAdd = false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 查看设备详情对话框 -->
    <el-dialog v-model="dialogDetial" title="设备详情" width="800">
      <el-table :data="tableDataDetial" style="width: 100%">
        <el-table-column prop="id" label="设备编号" width="180" />
        <el-table-column prop="name" label="设备名称" width="180" />
        <el-table-column prop="count" label="数量" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

const tableData = reactive([
  {
    id: "PD20231101",
    name: "执法记录仪",
    type: "监控设备",
    holder: "张伟",
    department: "市容管理局",
    allocationDate: "2023-03-15",
    status: "正常",
    lastMaintenance: "2024-09-20",
    remarks: "设备状况良好，按季度维护"
  },
  {
    id: "PD20231102",
    name: "对讲机",
    type: "通讯设备",
    holder: "王芳",
    department: "环卫科",
    allocationDate: "2022-07-10",
    status: "正常",
    lastMaintenance: "2024-08-10",
    remarks: "用于日常沟通，电池定期更换"
  }
  // 添加更多设备数据
]);

const form = ref({
  id: "",
  name: "",
  type: "",
  holder: "",
  department: "",
  allocationDate: "",
  status: "",
  lastMaintenance: "",
  remarks: ""
});
const dialogEdit = ref(false);
const dialogAdd = ref(false);
const dialogDetial = ref(false);
const rowIndex = ref(0);

function edit(row) {
  dialogEdit.value = true;
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  form.value = { ...row };
}

function saveEdit() {
  setTimeout(() => {
    ElMessage({
      message: "编辑成功",
      type: "success"
    });
    dialogEdit.value = false;
  }, 500);
}

function del(row) {
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  setTimeout(() => {
    tableData.splice(rowIndex.value, 1);
    ElMessage({
      message: "删除成功",
      type: "success"
    });
  }, 500);
}

function addForm() {
  form.value = {
    id: "",
    name: "",
    type: "",
    holder: "",
    department: "",
    allocationDate: "",
    status: "",
    lastMaintenance: "",
    remarks: ""
  };
  dialogAdd.value = true;
}

function saveAdd() {
  setTimeout(() => {
    tableData.push({
      id: `PD${new Date().getTime()}`, // 简单生成唯一ID
      ...form.value
    });
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    dialogAdd.value = false;
  }, 500);
}

function detial(row) {
  form.value = { ...row };
  dialogDetial.value = true;
}
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 12px;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  .form-handle {
    display: flex;
    grid-column: span 2;
    justify-content: end;
    margin-top: 12px;
  }
}
</style>
